<template>
  <el-dialog width="1000px" :title="isUpdate ? $t('修改订单') : $t('订单详情')" :visible.sync="showOrderDetail"
    :close-on-click-modal="false">
    <div class="order_detail">
      <div>

        <!-- 租借信息 -->
        <div>
          <div class="boxTitle">
            <div class="blueBox"></div>
            <div>租借信息</div>
          </div>
          <div class="itemWrap">
            <div>
              <span>租借商铺：</span>
              <span>{{ detailFrom.seller }}</span>
            </div>
            <div>
              <span>租借时间：</span>
              <span>{{ detailFrom.start_time }}</span>
            </div>
            <div>
              <span>租借方式：</span>
              <span>{{ detailFrom.user_type }}</span>
            </div>
            <div>
              <span>租借类型：</span>
              <span>{{ detailFrom.order_type == 1 ? $t("充氧宝") : $t("密码线") }}</span>
            </div>
            <div>
              <span>免费时长：</span>
              <span>{{ detailFrom.free_time }}分钟内免费</span>
            </div>
            <div>
              <span>收费标准：</span>
              <span>{{ detailFrom.billing }}</span>
            </div>
            <div>
              <span>每天封顶：</span>
              <span>{{ detailFrom.ceiling }}</span>
            </div>
            <div>
              <span>租借押金：</span>
              <span v-if="detailFrom.pay_auth_id > 0">免押租借（</span>{{ detailFrom.deposit }}<span
                v-if="detailFrom.pay_auth_id > 0">）</span>
            </div>
            <div>
              <span>设备编号：</span>
              <span>{{ detailFrom.device_id }}</span>
            </div>
            <div>
              <span>租借孔位：</span>
              <span>{{ detailFrom.rent_lock }}</span>
            </div>
            <div>
              <span>充氧宝编号：</span>
              <span>{{ detailFrom.battery_id }}</span>
            </div>
          </div>
        </div>

        <!-- 归还信息 -->
        <div v-if="!Replenishment">
          <div class="boxTitle">
            <div class="blueBox"></div>
            <div>归还信息</div>
          </div>
          <div class="itemWrap">
            <div>
              <span>归还商铺：</span>
              <span>{{ detailFrom.return_seller }}</span>
            </div>
            <div>
              <span>归还时间：</span>
              <span>{{ detailFrom.return_time }}</span>
            </div>
            <div>
              <span>设备编号：</span>
              <span>{{ detailFrom.return_device_id }}</span>
            </div>
            <!-- <div>
                      <span>归还孔位：</span>
                      <span>{{ detailFrom.return_device_num }}</span>
                    </div> -->
          </div>
        </div>

        <!-- 用户信息 -->
        <div v-if="!Replenishment">
          <div class="boxTitle">
            <div class="blueBox"></div>
            <div>用户信息</div>
          </div>
          <div class="itemWrap">
            <div>
              <span>用户昵称：</span>
              <span>{{ detailFrom.nick }}</span>
            </div>
            <div class="userID">
              <span>会员ID：</span>
              <div class="btn" @click="toCustomer(detailFrom.member_id)">{{ detailFrom.member_id }}</div>（点击跳转）
            </div>
          </div>
        </div>

        <!-- 丢失信息 -->
        <div v-if="Replenishment">
          <div class="boxTitle">
            <div class="blueBox"></div>
            <div>丢失信息</div>
          </div>
          <div class="itemWrap">
            <div>
              <span>归还商铺：</span>
              <span>丢失</span>
            </div>
            <div>
              <span>归还时间：</span>
              <span>{{ detailFrom.return_time }}</span>
            </div>
            <div v-if="detailFrom.lose_process == 1">
              <span>丢失处理：</span>
              <span>{{ detailFrom.return_device_id }}</span>
            </div>
            <div v-if="detailFrom.lose_process == 2">
              <span>丢失处理：</span>
              <span>已补钱{{ detailFrom.lose_agency }}</span>
            </div>
          </div>
        </div>
      </div>
      <div>
       
         <!-- 费用信息 -->
        <div>
          <div class="boxTitle">
            <div class="blueBox"></div>
            <div>费用信息</div>
          </div>
          <div class="itemWrap">
            <div>
              <span>订单编号：</span>
              <span>{{ detailFrom.order_no }}</span>
            </div>
            <div>
              <span>订单状态：</span>
              <!-- <span v-if="detailFrom.status_text!=''" >{{ detailFrom.status_text }}</span> -->

                <span v-if="detailFrom.status == 1">{{ $t("租借中") }}</span>
                <span v-if="detailFrom.status == 2">{{ $t("已完成") }}</span>
                <span v-if="detailFrom.status == 3">{{ $t("已撤销") }}</span>
                <span v-if="detailFrom.status == 4">{{ $t("订单超时") }}</span>
                <span v-if="detailFrom.status == 5">{{ $t("申请结束") }}</span>
                <span v-if="detailFrom.status == 6">{{ $t("丢失充氧宝") }}</span>
                <span v-if="detailFrom.status == 7">{{ $t("已归还未付款") }}</span>
                <span v-if="detailFrom.status == 8">{{ $t("待支付") }}</span>

            </div>
            <div>
              <span>租借时长：</span>
              <span>{{ detailFrom.use_time }}</span>
            </div>
            <div>
              <span>付款时间：</span>
              <span>{{ detailFrom.return_time }}</span>
            </div>
            <div v-if="detailFrom.status == 8">
              <span>总金额：</span>
              <span>{{ detailFrom.aamount }}元</span>
            </div>
            <div v-if="detailFrom.status == 8">
              <span>待支付金额：</span>
              <span>{{ detailFrom.camount }}元</span>
            </div>
            
            <div>
              <span>支付金额：</span>
              <span>{{ detailFrom.amount }}元</span>
            </div>
          </div>
        </div>

          <!-- 分成明细 -->
        <div>
          <div class="boxTitle">
            <div class="blueBox"></div>
            <div>分成明细</div>
          </div>
          <div class="itemWrap">
            <div v-for="(item, index) in detailFrom.brokerage" :key="index">
              <span>{{ item.type }}：</span>
              <span>{{ item.name }} -- 分成{{ item.ratio }}%</span>
            </div>

          </div>
        </div>
         

         <!-- 修改金额 -->
        <div v-if="isUpdate">
          <div class="boxTitle">
            <div class="blueBox"></div>
            <div>修改金额</div>
          </div>
          <div>
            <div class="itemWrap">
              <div class="payBox">
                <span>支付金额: </span>
                <el-input v-model="order_num" :placeholder="$t('请输入')" class="payInput"></el-input>
                <el-input v-model="endRemark" :placeholder="$t('请输入备注')" class="payInput"></el-input>
                <el-button size="medium" type="primary" v-if="isUpdate" @click="updateSubmit">提交修改</el-button>
              </div>
              <div class="payBox">
                <span>选择原因: </span>
                <el-select v-model="clientValRe" :placeholder="$t('请选择')" style="width:150px;margin-left:10px;">
                  <el-option v-for="item in clientArrRe" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div>
              <span class="payBoxTips">修改金额不能大于订单金额修改后代理分成将重新计算</span>
            </div>

          </div>
        </div>

         <!-- 补充氧宝 -->
        <div v-if="Replenishment">
          <div class="boxTitle">
            <div class="blueBox"></div>
            <div>补充氧宝</div>
          </div>
          <div class="sub" style="display: flex;flex-direction: column;margin: 20px 0;">
            <el-radio-group v-model="radio">
              <el-radio :label="0">已补货</el-radio>
              <el-radio v-for="(item, index) in detailFrom.loseArr" :key="index" :label="item.id">{{ $t("补钱") }} {{
                item.name }}</el-radio>
            </el-radio-group>
          </div>
          <el-button type="primary" @click="repairSubmit">{{ $t("提交") }}</el-button>
        </div>

         <!-- 操作日志 -->
        <div v-if="!Replenishment">
          <div class="boxTitle">
            <div class="blueBox"></div>
            <div>操作日志</div>
          </div>
          <div class="itemWrap">
            <div v-for="(item, index) in detailFrom.operate_logs" :key="index">
              <span>{{ item.time }}：</span>
              <span>{{ item.operate }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "order-detail-dialog",
  props: {
    detailFrom: {  //详情数据 
      type: Object,
      default: {}
    },
    isUpdate: {   //true为修改  false为详情
      type: Boolean,
      default: false
    },
    orderNum: { //支付金额
      type: String | Number,
      default: ""
    },
    Replenishment: {   //true有补充氧宝  
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      showOrderDetail: false,
      clientValRe: '',  //选择原因
      endRemark: "", // 备注
      order_num: "",
      radio: 0, //补充氧宝
      clientArrRe: [
        {
          value: '设备离线',
          label: '设备离线',
        },
        {
          value: '用户投诉',
          label: '用户投诉',
        },
        {
          value: '还错宝',
          label: '还错宝',
        },
        {
          value: '机柜没插电',
          label: '机柜没插电',
        },
        {
          value: '没地方归还',
          label: '没地方归还',
        },
        {
          value: '机柜充氧宝满',
          label: '机柜充氧宝满',
        },
      ],
    }
  },
  computed: {

  },
  created() {
  },
  watch: {
    orderNum(newVal, oldVal) {
      this.order_num = newVal
    }
  },
  methods: {
    show() {
      this.showOrderDetail = true
    },
    hide() {
      this.showOrderDetail = false
      this.reset()
    },
    toCustomer(id) {
      this.$emit('toCustomer', id)
    },
    updateSubmit() {
      if (!this.endRemark && !this.clientValRe) {
        this.$message.error('请输入备注并选择原因');
        return
      }
      if (!this.endRemark || !this.clientValRe) {
        if (!this.endRemark) {
          this.$message.error('请输入备注');
        } else {
          this.$message.error('请选择原因');
        }
        return
      }
      this.$emit('updateSubmit', {
        order_num: this.order_num,
        endRemark: this.endRemark,
        clientValRe: this.clientValRe,
        hide: this.hide
      })
    },

    //补充氧宝 提交
    repairSubmit() {
      this.$emit('repairSubmit', {
        order_no: this.detailFrom.order_no,
        process: this.radio,
        hide: this.hide
      })
    },
    reset() {
      this.order_num = ""
      this.endRemark = ""
      this.clientValRe = ""
      this.radio = 0
    }
  }
}
</script>

<style scoped>
.order_detail {
  display: flex;
  justify-content: space-around;
  margin: 0 20px;
  margin-top: -30px;
}

.order_detail .boxTitle {
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: 20px;
  color: #7E7E7E;
}

.order_detail .blueBox {
  width: 6px;
  height: 22px;
  margin-right: 10px;
  background: #3786E8;
}

.order_detail .itemWrap {
  margin: 12px 20px;
  font-size: 15px;
  color: #7E7E7E;
}

.order_detail .itemWrap div {
  margin-bottom: 10px;
}

.order_detail .itemWrap .userID {
  display: flex;
  cursor: pointer;
}

.order_detail .itemWrap .userID .btn {
  font-size: 15px;
  color: #3786E8;
  background-color: #fff;
  outline: none;
  border: none;
  border-bottom: 2px solid #3786E8;
}

.order_detail .itemWrap .payBox {
  display: flex;
  align-items: center;
}

.order_detail .itemWrap .payBox .payInput {
  width: 150px;
  margin: 0 10px;
}

.order_detail .itemWrap .payBoxTips {
  color: #ED6A6A;
}

.end_order {
  padding-left: 50px;
}

.end_order .txt_list {
  margin-bottom: 20px;
}

.end_order .txt_list .lable {
  display: inline-block;
  width: 80px;
}

.end_order .txt_list ul {
  padding: 0;
  margin: 0;
}

.end_order .txt_list .li {
  margin-bottom: 5px;
  list-style: none;
}

.end_order .radio_list {
  margin-bottom: 20px;
}

.end_order .radio_list .lable {
  display: inline-block;
  width: 80px;
}

.end_order .radio_list .txt {
  margin-left: 20px;
  cursor: pointer;
}

.end_order .ipt_list {
  margin-bottom: 20px;
}

.end_order .ipt_list .lable {
  display: inline-block;
  width: 80px;
}

.end_order .ipt_list .el-input {
  width: 150px;
  margin-right: 15px;
}

.end_order .textarea_list .lable {
  display: inline-block;
  width: 80px;
}

.end_order .textarea_list .el-textarea {
  width: 360px;
}

.end_order .el-button {
  margin-top: 30px;
  margin-left: 80px;
}
</style>

<style>
.end_order .textarea_list .el-textarea__inner {
  min-height: 90px !important;
}

.end_order .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
}

.order_no {
  display: flex;
}

.danger {
  color: red;
}
</style>